<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '收货人管理',
  },
}
</route>

<script lang="ts" setup>
import type { ReceiptDto } from '@/service/app'
import { receiptControllerRemove as deleteReceipt, receiptControllerFindOne as getAddress } from '@/service/app'
import { useUserStore } from '@/store'

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
const systemInfo = uni.getWindowInfo()
const top = systemInfo.safeArea?.top ?? null
// #endif

function back() {
  uni.navigateBack()
}

const userStore = useUserStore()

const userInfo = computed(() => {
  const storeInfo = userStore.userInfo
  return {
    id: storeInfo.id || null, // 获取当前用户id
  }
})
console.log(userInfo.value)

const address = ref<ReceiptDto[]>()

// 封装获取地址列表的函数
async function fetchAddressList() {
  const { data } = await getAddress({ params: { userId: userInfo.value.id } })
  console.log(data)
  address.value = data
}

onShow(async () => {
  await fetchAddressList()
})

function toAddReceiver() {
  uni.navigateTo({
    url: '/pages/receiver/addReceiver',
  })
}

function editAddress(item: ReceiptDto) {
  // 将item转为JSON字符串，作为URL参数传递
  const itemStr = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/pages/receiver/editAddress?item=${itemStr}`, // 拼接参数
  })
}

function deleteAddress(item: ReceiptDto) {
  uni.showModal({
    title: '删除地址',
    content: '确认删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        // 调用删除接口
        const { data } = await deleteReceipt({ params: { id: item.id } })
        console.log(data)
        // 删除成功，调用函数刷新列表
        await fetchAddressList()
      }
    },
  })
}
</script>

<template>
  <!-- 导航栏 -->
  <view class="fixed top-0 z-20 w-full bg-white transition-all duration-300">
    <view class="bg-white" :style="{ height: `${top}px` }" />
    <view class="h-11 flex items-center bg-white px-4">
      <wd-icon name="thin-arrow-left" size="22px" @click="back" />
      <h1 class="flex-1 truncate px-6 text-lg text-gray-800 font-medium">
        收货人管理
      </h1>
    </view>
  </view>
  <view class="mt-20rpx box-border min-h-[100vh] overflow-hidden bg-[#f4f4f4]">
    <!-- 间隔占位 -->
    <view class="pt-5" :style="{ marginTop: `${top + 20}px` }" />
    <!-- 地址列表 -->
    <view v-if="address?.length !== 0" class="mx-30rpx mt-10rpx rounded-lg bg-white px-30rpx py-40rpx text-26rpx shadow-sm">
      <view v-for="(item, index) in address" :key="item.id">
        <view class="flex flex-col justify-between">
          <view class="flex">
            <view>{{ item.name }}</view>
            <view v-if="item.isDefault" class="ml-20rpx flex items-center justify-center rounded-xl px-10rpx text-20rpx text-#ceb5a0" style="border: 2rpx solid #ceb5a0">
              默认
            </view>
          </view>
          <view class="my-20rpx flex">
            <view class="w-120rpx flex-shrink-0">
              手机号:
            </view>{{ item.phone }}
          </view>
          <view class="flex justify-between">
            <view class="flex">
              <text class="w-120rpx flex-shrink-0">
                地址:
              </text>{{ item.area }}{{ item.address }}
            </view>
            <view class="flex">
              <wd-icon name="edit-1" color="#bfa189" size="40rpx" @click="editAddress(item)" />
              <view class="w-20rpx" />
              <wd-icon name="delete-thin" size="40rpx" color="#bfa189" @click="deleteAddress(item)" />
            </view>
          </view>
          <!-- 分割线,最后一块不显示 -->
          <view v-if="index !== address.length - 1" class="my-30rpx h-1rpx w-full bg-gray-100" />
        </view>
      </view>
    </view>
    <!-- 缺省提示 -->
    <view v-if="address?.length === 0" class="mt-20rpx">
      <wd-card>
        <DefaultPlaceholder image-src="https://m.360buyimg.com/i/jfs/t1/289733/19/4019/4707/687e12b2Fe336351e/93170f38407e7f8d.jpg" text="暂无收货人信息" />
      </wd-card>
    </view>
  </view>
  <!-- 新增按钮 -->
  <view
    class="fixed bottom-50rpx left-1/2 w-300rpx flex transform items-center justify-center rounded-3xl bg-[linear-gradient(to_right,#e0cebd,#bfa189)] px-4 py-2 text-white -translate-x-1/2"
    @click="toAddReceiver"
  >
    新增收货人
  </view>
</template>

<style lang="scss" scoped>
//
</style>
